<template>
  <div class="continer">
    <Category title="美食">
      <img
        slot="center"
        src="http://gips0.baidu.com/it/u=3602773692,1512483864&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280"
        alt=""
      />
      <a slot="footer" href="http://www.atguigu.com">更多</a>
    </Category>
    <Category title="电影">
      <video slot="center"
        controls
        src="https://7e7dba49-fc9d-4083-bd7d-4946bf59dfaf.mdnplay.dev/shared-assets/videos/flower.webm"
      ></video>
      <template v-slot:footer>
        <div class="foot">
          <a href="">热门</a>
          <a href="">动作</a>
          <a href="">推荐</a>
        </div>
        <h4>欢迎前来观影</h4>
      </template>
    </Category>

    <Category title="游戏">
      <ul slot="center">
        <li v-for="(game, index) in games" :key="index">{{ game }}</li>
      </ul>
      <div class="foot" slot="footer">
          <a href="">单机游戏</a>
          <a href="">网络游戏</a>
      </div>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category";
export default {
  name: "App",
  data() {
    return {
      foods: ["羊肉串", "牛肉产", "猪肉穿"],
      movies: ["碟中谍1", "碟中谍2", "碟中谍3", "碟中谍4"],
      games: ["红警", "CS", "dota", "LOL"],
    };
  },
  components: {
    Category,
  },
};
</script>

<style>
.continer,.foot {
  display: flex;
  justify-content: space-around;
}

img {
  width: 100%;
}
video {
  width: 100%;
}

h4{
  text-align: center;
}
</style>
